<template>
<Content>
  <Row :gutter="24">
    <Col span="18">
      <Card>
        <Form :label-width="80" style="font-weight: bold">
          <FormItem label="文章标题">
            <Input v-model="articleTitle"  style="min-width:100%"/>
          </FormItem>
          <FormItem label="摘要">
            <Input v-model="summary" type="textarea"  style="min-width:100%" />
          </FormItem>
        </Form>
      </Card>
     <div>
       <textarea id="articleEditor" style="width: 100%"></textarea>
     </div>

    </Col>
    <Col span="6" style="margin-top: 20px">
      <Card>
        <p slot="title">
          基本属性
        </p>
        <p><label>发布时间：</label><DatePicker :value="publishTime" @on-change="publishTimeChange"    type="datetime" style="width:220px" placeholder="发布时间"></DatePicker></p>
        <p style="margin-top: 15px"><label style="padding-left: 2em">来源：</label><Input v-model="source" style="width: 220px" type="text" /></p>
        <p style="margin-top: 15px"><label style="padding-left: 2em">作者：</label><Input v-model="author" style="width: 220px" type="text" /></p>
        <p style="margin-top: 15px"><label style="padding-left: 1em">关键字：</label><Input v-model="keywords" style="width: 220px" type="text" /></p>
        <p class="publish-button"><Button long @click="submit" type="primary">发布文章</Button></p>
      </Card>
    </Col>
  </Row>
</Content>



</template>

<script>
  import tinymce from "tinymce";
  import 'tinymce/themes/modern/theme'
    export default {
        name: "text-editor",
        inject:['reload'],
      data(){
          return{
            articleTitle:"",//文章标题
            summary:"",//摘要
            publishTime:"",//发布时间
            source:"",//新闻来源
            author:"",//作者
            keywords:"",//关键字
            contentText:"",//文章正文
            newKeyword:""
          }
      },
      watch:{
        contentText(){
        },
        articleTitle(){
        }
      },
      created(){
          this.getCurrentDate()
      },
      mounted(){
      tinymce.init({
      selector: '#articleEditor',
      branding: false,
      elementpath: false,
          width:'100%',
      height: 380,
      language: 'zh_CN.GB2312',
      menubar: 'edit insert view format table tools',
      theme: 'modern',
      plugins: [
        'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
        'searchreplace visualblocks visualchars code fullscreen fullpage',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons paste textcolor colorpicker textpattern imagetools codesample'
      ],
      toolbar1: ' newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
      autosave_interval: '20s',
      image_advtab: true,
      table_default_styles: {
        width: '100%',
        borderCollapse: 'collapse'
      }
    });


      },
      methods:{
            getCurrentDate(){
                let date=new Date();
                let year=date.getFullYear();
                let month=date.getMonth()+1;
                let day=date.getDate();
                let hour=date.getHours();
                let minute=date.getMinutes();
                let second=date.getSeconds();
                this.publishTime=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
                return this.publishTime
            },
          publishTimeChange(e){
              this.publishTime=e;
          },
        canPublish(){
          if(this.articleTitle.length==0){
            this.$Message.error("请输入文章标题");
            return false;
          }
          else {
            return true;
          }
        },
        submit(){
          if(this.canPublish()){
              this.contentText=tinymce.activeEditor.getContent()
              // console.log(this.contentText.trim())
              this.$http({
                method:'POST',
                url:this.$url.baseUrl+'/consulting-library/api/manuscript/insertManuscript',
                data:{
                  'title':this.articleTitle,
                  'summary':this.summary,
                  'contentFull':this.contentText,
                  'publishTime':this.publishTime,
                  'source':this.source,
                  'author':this.author,
                  'keywords': this.keywords,
                  'uploadTypeId':1,
                  'uploadTypeName': "稿件上传",

                }
              }).then(response =>{
                if(response.data.meta.success){

                    this.$Message.success("文章发布成功！")
                    this.reload();

                }
              })

          }


        }
      },
        destroyed(){
            tinymce.get('articleEditor').destroy()
        }
    }
</script>

<style scoped>
.publish-button{
  margin-top: 20px;
  font-size: 20px;
}
</style>
